<template>
  <div class="app-container">
    <div class="line">
      客户信息是否允许手机号重复
      <a-radio-group v-model="params.mobileRepeat" @change="changeMobileRepeat">
        <a-radio :value="1">是</a-radio>
        <a-radio :value="0">否</a-radio>
      </a-radio-group>
    </div>
    <div class="line">
      客户信息列表是否展示完整手机号
      <a-radio-group v-model="params.mobileAllShow" @change="changeMobileAllShow">
        <a-radio :value="1">是</a-radio>
        <a-radio :value="0">否</a-radio>
      </a-radio-group>
    </div>
    <div class="line">
      <div>
        待分配置设置<span class="line-tips">（未分配任何负责人或在未来N天内有计划开始的任务，且尚未分配负责人的客户）</span>
      </div>
      <div>
        <a-input-number
          v-model="params.pendingAllocationDays"
          :style="{ width: '150px', background: '#ffff' }"
          @input="inputDays"
        />
        <span class="day-unit">天</span>
      </div>
    </div>
    <div class="line">
      <div>
        仅使用纯采购模式<span class="line-tips"
          >（开启后，商家可便捷向工厂发起采购，但业主、客户相关合同、收款、工程、售后等应用不可用，请慎重）</span
        >
      </div>
      <a-radio-group v-model="params.pureProcurement" @change="changeMobileAllShow">
        <a-radio :value="1">是</a-radio>
        <a-radio :value="0">否</a-radio>
      </a-radio-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getConfig as config, setConfig } from "@/apis/system";
import { Message } from "@arco-design/web-vue";
import { debounce } from "lodash";

const params = ref({
  mobileRepeat: 0,
  mobileAllShow: 0,
  pendingAllocationDays: 3,
  pureProcurement: 0
});
const getConfig = async () => {
  const { data } = await config();
  data.mobileRepeat = data.mobileRepeat ?? 0;
  data.mobileAllShow = data.mobileAllShow ?? 0;
  data.pendingAllocationDays = data.pendingAllocationDays ?? 3;
  data.pureProcurement = data.pureProcurement ?? 0;
  params.value = data;
};

const changeMobileRepeat = async () => {
  try {
    await setConfig(params.value);
    getConfig();
    Message.success("修改成功");
  } catch (err) {
    params.value.mobileRepeat = params.value.mobileRepeat === 1 ? 0 : 1;
  }
};
const changeMobileAllShow = async () => {
  try {
    await setConfig(params.value);
    getConfig();
    Message.success("修改成功");
  } catch (err) {
    params.value.mobileAllShow = params.value.mobileAllShow === 1 ? 0 : 1;
  }
};

const inputDays = debounce(async (val: any) => {
  params.value.pendingAllocationDays = val;
  if (/^[1-9]\d*$/.test(val) && Number(val) > 0) {
    await setConfig(params.value);
    getConfig();
    Message.success("修改成功");
  } else {
    Message.error("请输入正整数");
  }
}, 1000);
getConfig();
</script>

<style scoped lang="scss">
.line {
  width: 100%;
  height: 40px;
  background: #f5f7fa;
  border-radius: 4px 4px 4px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-left: 10px;

  .line-tips {
    color: #86909c;
    font-size: 14px;
  }

  .day-unit {
    margin-left: 10px;
    margin-right: 20px;
  }
}
</style>
